<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			The <code>&lt;o:highlight&gt;</code> is a helper component which highlights all invalid <code>UIInput</code> 
			components and the associated labels by adding an error style class to them. Additionally, it by default 
			focuses the first invalid <code>UIInput</code> component.
		</p>
		<p>
			This showcase application has the following CSS configured for the purpose:
		</p>
		<pre class="prettyprint"><code class="lang-css">
label.error {
    color: #c66;
}

input.error, select.error, textarea.error {
    background-color: #fee;
}
		</code></pre>
		<p>
			The default style class name is <code>error</code> and this can be changed as follows:
		</p>
		<pre class="prettyprint"><code class="lang-xhtml">
&lt;o:highlight styleClass="invalid" /&gt;
		</code></pre>
	</ui:define>

	<ui:define name="demo">
		<h:form>
			<h3>Please fill out all of those fields.</h3>
			<p>Of course, don't fill them in order to see the <code>&lt;o:highlight&gt;</code> in action.</p>

			<h:panelGrid columns="3">
				<o:outputLabel for="input1" value="Foo" />
				<h:inputText id="input1" required="true" />
				<h:message for="input1" />

				<o:outputLabel for="input2" value="Bar" />
				<h:inputText id="input2" required="true" />
				<h:message for="input2" />

				<o:outputLabel for="input3" value="Baz" />
				<h:inputText id="input3" required="true" />
				<h:message for="input3" />

				<h:panelGroup />
				<h:commandButton value="submit">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
				<h:panelGroup>
					<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
				</h:panelGroup>
			</h:panelGrid>
		</h:form>
		
		<o:highlight /> <!-- Note: just for demo, another one is already included in showcase.xhtml template. -->
	</ui:define>
</ui:composition>